<!doctype>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>

    body {
      font-family: Helvetica, Arial, sans-serif;
    }

    .dropdown__toggle {
      display: block;
      padding: 0.5em 1em;
      border: 1px solid hsl(280, 10%, 80%);
      color: hsl(280, 30%, 60%);
      background-color: white;
      font: inherit;
      text-decoration: none;
      transition: background-color 0.2s linear;
    }
    .dropdown__toggle:hover {
      background-color: hsl(280, 15%, 95%);
    }
    .dropdown__drawer {
      position: absolute;
      background-color: white;
      width: 10em;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s linear,
                  visibility 0s linear 0.2s;
    }
    .dropdown.is-open .dropdown__drawer {
      opacity: 1;
      visibility: visible;
      transition-delay: 0s;
    }

    .menu {
      padding-left: 0;
      margin: 0;
      list-style: none;
    }
    .menu > li + li > a {
      border-top: 0;
    }
    .menu > li > a {
      display: block;
      padding: 0.5em 1em;
      color: hsl(280, 40%, 60%);
      background-color: white;
      text-decoration: none;
      transition: all .2s linear;
      border: 1px solid hsl(280, 10%, 80%);
    }
    .menu > li > a:hover {
      background-color: hsl(280, 15%, 95%);
      color: hsl(280, 25%, 10%);
    }

    </style>
  </head>
  <body>
    <div class="dropdown" aria-haspopup="true">
      <button class="dropdown__toggle">Menu</button>
      <div class="dropdown__drawer">
        <ul class="menu" role="menu">
          <li role="menuitem">
            <a href="/features">Features</a>
          </li>
          <li role="menuitem">
            <a href="/pricing">Pricing</a>
          </li>
          <li role="menuitem">
            <a href="/support">Support</a>
          </li>
          <li role="menuitem">
            <a href="/about">About</a>
          </li>
        </ul>
      </div>
    </div>
    <p><a href="/read-more">Read more</a></p>

    <script type="text/javascript">
      (function () {
        var toggle = document.getElementsByClassName('dropdown__toggle')[0];
        var dropdown = toggle.parentElement;
        toggle.addEventListener('click', function (e) {
          e.preventDefault();
          dropdown.classList.toggle('is-open');
        });
      }());
    </script>
  </body>
</html>
